<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>
<script>
import * as Echarts from 'echarts'
import radarData from './radar-base'
//  1. 导入 或者  script外链资源
//  2. 初始化一个echart对象   let echart = Echarts.init(挂载DOM节点)
//  3. 设置配置项  echart.setOption({配置对象}) 配置对象翻阅文档即可！
export default {
  name:'Aadar',
  // 因为之后再这里才可以获取到真实的DOM节点
  mounted () { 
    // 初始化
    this.echart = Echarts.init(this.$refs.myDiv)
    // 设置配置项
    this.echart.setOption(radarData) 
    // 请求数据
    this.initData()  // 注意这个方法不能再created里面调用  
  },
  // created () {
  //   this.initData()
  // },
  methods: {
    // 去请求图标的数据
    initData() {
        setTimeout(() => {
          // 模拟服务器返回数据
          let responData = {
            aaa:[4200, 3000, 20000, 35000, 50000, 18000],
            bbb:[5000, 14000, 28000, 26000, 42000, 21000]
          }
          // 将数据设置到基础数据里面
          radarData.series[0].data[0].value = responData.aaa
          radarData.series[0].data[1].value = responData.bbb
          // 重新绘制图表
          this.echart.setOption(radarData)    
        }, 3000);
    }
  },
}
</script>
<style>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>